<template>
  <ul>
    <li
      v-for="(item, index) in stepArray"
      :key="index"
      :style="{ width: 100 / stepArray.length + '%' }"
      :class="activeId == index ? 'current' : activeId > index ? 'passed' : ''"
    >
      <samp class="less1 left"></samp>
      <div class="block">{{ item.title }}</div>
      <span class="less"></span>
    </li>
  </ul>
</template>

<script>
export default {
  name: "MyProgress",
  components: {},
  props: {
    activeId: {
      type: Number,
      default: 3
    },
    stepArray: {
      type: Array,
      default: () => [
        {id:1,title:"步骤一"},
        {id:2,title:"步骤二"},
        {id:3,title:"步骤三"},
        {id:4,title:"步骤四"},
        {id:5,title:"步骤五"}
      ]
    }
  },
  data() {
    return {
      drawerVisible: false,
      // 数据
      data: {}
    }
  },
  methods:{
    aa(id){
      alert(id)
    }
  }
}
</script>

<style scoped lang="scss">
ul {
  list-style: none;
  --step-bg-color: #fff;
  --step-item-bg-color: #b5b9bd;
  --step-current-bg-color: rgb(14, 127, 232);
  --step-passed-bg-color: rgb(73, 161, 243);
  --step-height: 45px;
  --step-arrow-height: calc(var(--step-height) / 2);
  height: var(--step-height);
  width: 100%;
  background: var(--step-bg-color);
  padding: 0 20px;
  box-sizing: border-box;
  li {
    background: var(--step-bg-color);
    display: inline-block;
    position: relative;
    margin-left: -5px;
    // cursor: pointer;
    &:first-of-type{
      margin-left: 10px;
    }
    .less {
      border-style: dashed dashed dashed solid;
      border-color: transparent transparent transparent
      var(--step-item-bg-color);
      border-width: var(--step-arrow-height) 0
      var(--step-arrow-height) calc(var(--step-arrow-height) / 2);
      top: 0;
    } /*dashed 设置透明*/
    .less1 {
      border-style: dashed dashed dashed solid;
      border-color: transparent transparent transparent var(--step-bg-color);
      border-width: var(--step-arrow-height) 0
      var(--step-arrow-height) calc(var(--step-arrow-height) / 2);
      top: 0;
    }
    .left {
      left: 0;
    }
    samp {
      display: block;
      position: absolute;
      z-index: 2;
    }
    span {
      display: block;
      position: relative;
      float: left;
      z-index: 3;
    }
    .block {
      width: calc(100% - 15px);
      line-height: var(--step-height);
      text-align: center;
      background: var(--step-item-bg-color);
      vertical-align: middle;
      color: #fff;
      float: left;
      z-index: 1;
    }
  }
  .current{
    .block {
      background: var(--step-current-bg-color);
    }
    .less {
      border-color: transparent transparent transparent var(--step-current-bg-color);
    }
  }
  .passed{
    .block {
      background: var(--step-passed-bg-color);
    }
    .less {
      border-color: transparent transparent transparent var(--step-passed-bg-color);
    }
  }
}

</style>
